<script lang="ts" setup>
import { graphic } from 'echarts/core'
import { useSettingsStore } from '/@/store/modules/settings'
import { lightenColor } from '/@/utils/lightenColor'

defineOptions({
  name: 'UserRelations',
})

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)

const handleClick = () => {
  console.log('click')
}

// Card info data for page-top section
const cardInfo = reactive<any>([
  {
    title: '用户信息统计',
    en: 'User Information Statistics',
    icon: 'user-line',
    data: [
      {
        name: '识别用户总数',
        en: 'Total Identified Users',
        value: '1983',
        unit: '户',
      },
      {
        name: '新接入用户数',
        en: 'Newly Connected Users',
        value: '2',
        unit: '户',
      },
      {
        name: '异常关系数',
        en: 'Abnormal Relationships',
        value: '2',
        unit: '户',
      },
    ],
  },
  {
    title: '变压器统计',
    en: 'Transformer Statistics',
    icon: 'settings-3-line',
    data: [
      {
        name: '变压器总数',
        en: 'Total Transformers',
        value: '3',
        unit: '台',
      },
      {
        name: '异常变压器数量',
        en: 'Abnormal Transformers',
        value: '1',
        unit: '台',
      },
      {
        name: '重载变压器数量',
        en: 'Heavy-load Transformers',
        value: '1',
        unit: '台',
      },
    ],
  },
  {
    title: '负荷匹配情况',
    en: 'Load Matching Analysis',
    icon: 'bar-chart-line',
    data: [
      {
        name: '用户-变压器整体匹配率',
        en: 'Overall User-Transformer Matching Rate',
        value: '98.3',
        unit: '%',
      },
      {
        name: '用户负荷占变压器容量比',
        en: 'User Load to Transformer Capacity Ratio',
        value: '85.4',
        unit: '%',
      },
      {
        name: '异常匹配负荷占比',
        en: 'Abnormal Load Matching Ratio',
        value: '3.7',
        unit: '%',
      },
    ],
  },
])

// Top list indicators for the header cards
const topList = [
  {
    icon: 'user-line',
    content: '识别用户总数',
    number: '1983',
    unit: '户',
  },
  {
    icon: 'user-add-line',
    content: '新接入用户数',
    number: '2',
    unit: '户',
  },
  {
    icon: 'error-warning-line',
    content: '异常关系数',
    number: '2',
    unit: '户',
  },
  {
    icon: 'settings-3-line',
    content: '变压器总数',
    number: '3',
    unit: '台',
  },
]

// Add chooseIndex for the selected card styling
const chooseIndex = ref(0)
const handleStyleFun = (e: Event, index: number) => {
  chooseIndex.value = index
}

// Current status data
const currentStatus = reactive({
  status: '0',
  user: '0',
  hours: '0',
})

const tableData = [
  {
    date: '18:00',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: '严重',
    tag: 'Home',
  },
  {
    date: '18:00',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: '警告',
    tag: 'Office',
  },
]

const userImageModel = ref<any>('')
const userGroup = ref<any>('0')
const priorityTransformer = ref<string>('T2')
const dialogVisible = ref(false)
const currentNode = ref<any>(null)

// NEW: Transformer record variables
const searchQuery = ref('')
const activeTransformer = ref<string | null>(null)
const viewDialogVisible = ref(false)
const detectionDialogVisible = ref(false)
const changeDialogVisible = ref(false)
const currentDetailUser = ref<any>(null)
const changeReason = ref('')
const hasSearched = ref(false) // Track if search has been performed

// Define interfaces for the transformer and user data
interface Transformer {
  id: string
  households: number
  active: boolean
}

interface TransformerUser {
  id: string
  updateTime: string
  changeRecord: string
  selected: boolean
}

// Transformer data with proper typing
const transformerList = ref<Transformer[]>([
  { id: 'T1', households: 30, active: false },
  { id: 'T2', households: 40, active: false },
  { id: 'T3', households: 30, active: false },
])

// Filtered transformer list based on search
const filteredTransformerList = computed(() => {
  if (!searchQuery.value.trim()) {
    return hasSearched.value ? [] : []
  }

  const query = searchQuery.value.trim().toLowerCase()
  return transformerList.value.filter((transformer) => transformer.id.toLowerCase().includes(query))
})

// Users for each transformer with proper typing
const transformerUsers = ref<Record<string, TransformerUser[]>>({
  T1: [
    { id: '住户1', updateTime: '24-3-5', changeRecord: 'T1 → T1', selected: false },
    { id: '住户2', updateTime: '24-3-5', changeRecord: 'T2 → T1', selected: false },
    { id: '住户3', updateTime: '24-3-5', changeRecord: 'T3 → T1', selected: false },
  ],
  T2: [
    { id: '住户4', updateTime: '24-3-5', changeRecord: 'T1 → T2', selected: false },
    { id: '住户5', updateTime: '24-3-5', changeRecord: 'T2 → T2', selected: false },
  ],
  T3: [
    { id: '住户6', updateTime: '24-3-5', changeRecord: 'T3 → T3', selected: false },
    { id: '住户7', updateTime: '24-3-5', changeRecord: 'T2 → T3', selected: false },
  ],
})

// Toggle transformer visibility with proper typing
const toggleTransformer = (transformer: Transformer) => {
  if (activeTransformer.value === transformer.id) {
    activeTransformer.value = null
  } else {
    activeTransformer.value = transformer.id
  }
}

// Open view details dialog with proper typing
const openViewDialog = (user: TransformerUser) => {
  currentDetailUser.value = user
  viewDialogVisible.value = true
}

// Open detection dialog with proper typing
const openDetectionDialog = (user: TransformerUser) => {
  currentDetailUser.value = user
  detectionDialogVisible.value = true
}

// Search transformers
const searchTransformer = () => {
  console.log('Searching for:', searchQuery.value)
  hasSearched.value = true
}

// Open dialog for changing transformer
const openChangeDialog = (user: TransformerUser) => {
  currentDetailUser.value = user
  changeDialogVisible.value = true
  // Parse the current transformer from the change record
  const currentTransformer = user.changeRecord.split('→')[1].trim()
  targetTransformer.value = currentTransformer
}

// Target transformer for change dialog
const targetTransformer = ref('T3')

// 用户-变压器映射图配置
const option = reactive<any>({
  backgroundColor: '#fff',
  tooltip: {
    trigger: 'item',
    formatter: '{b}',
  },
  series: [
    {
      type: 'graph',
      layout: 'force',
      data: [
        {
          name: 'T1',
          symbolSize: 50,
          itemStyle: {
            color: '#f18bbf',
            borderColor: '#f18bbf',
          },
          category: 0,
        },
        {
          name: 'T2',
          symbolSize: 50,
          itemStyle: {
            color: '#0078D7',
            borderColor: '#0078D7',
          },
          category: 0,
        },
        // 用户节点 - T1连接
        { name: 'U1', symbolSize: 20, category: 1 },
        { name: 'U2', symbolSize: 20, category: 1 },
        { name: 'U3', symbolSize: 20, category: 1 },
        { name: 'U4', symbolSize: 20, category: 1 },
        { name: 'U5', symbolSize: 20, category: 1 },
        { name: 'U6', symbolSize: 20, category: 1, itemStyle: { color: 'red' } }, // 异常连接标红
        { name: 'U7', symbolSize: 20, category: 1 },
        { name: 'U8', symbolSize: 20, category: 1 },
        // 用户节点 - T2连接
        { name: 'U9', symbolSize: 20, category: 2 },
        { name: 'U10', symbolSize: 20, category: 2 },
        { name: 'U11', symbolSize: 20, category: 2 },
        { name: 'U12', symbolSize: 20, category: 2 },
        { name: 'U13', symbolSize: 20, category: 2 },
        { name: 'U14', symbolSize: 20, category: 2 },
      ],
      links: [
        { source: 'T1', target: 'U1' },
        { source: 'T1', target: 'U2' },
        { source: 'T1', target: 'U3' },
        { source: 'T1', target: 'U4' },
        { source: 'T1', target: 'U5' },
        { source: 'T1', target: 'U6', lineStyle: { color: 'red', width: 2 } }, // 异常连接标红
        { source: 'T1', target: 'U7' },
        { source: 'T1', target: 'U8' },
        { source: 'T2', target: 'U9' },
        { source: 'T2', target: 'U10' },
        { source: 'T2', target: 'U11' },
        { source: 'T2', target: 'U12' },
        { source: 'T2', target: 'U13' },
        { source: 'T2', target: 'U14' },
      ],
      categories: [{ name: '变压器' }, { name: 'T1用户' }, { name: 'T2用户' }],
      lineStyle: {
        color: 'source',
        curveness: 0.3,
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}',
        fontSize: 12,
        color: '#333',
      },
      force: {
        repulsion: 200,
        gravity: 0.1,
        edgeLength: 100,
      },
    },
  ],
})

// 点击节点显示推荐窗口
const handleNodeClick = (params: any) => {
  console.log(params, 'params')
  if (params.dataType === 'node' && params.data.category !== 0 && params.color === 'red') {
    // 保存当前节点信息
    currentNode.value = params.data
    // 打开对话框
    dialogVisible.value = true
  }
}

const optionThree = reactive<any>({
  tooltip: {
    show: false,
    trigger: 'axis',
    formatter: '当前时刻:<br/>{b}<br/>当前负荷: <br/>{c}kw',
    extraCssText: 'width:120px;white-space:wrap',
    backgroundColor: '#21ba94',
    textStyle: {
      color: '#fff',
    },
    borderWidth: 0,
  },
  legend: {
    // show: true,
    top: 'bottom',
    icon: 'rect',
    data: ['变压器实测负荷', '用户合成负荷'],
  },
  // grid: {
  //   top: '5%',
  //   left: '5%',
  //   right: '5%',
  //   bottom: '10%',
  //   // containLabel: true,
  // },
  xAxis: {
    type: 'category',
    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
    axisTick: {
      alignWithLabel: true,
    },
  },

  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.6,
      },
    },
  },

  series: [
    {
      name: '变压器实测负荷',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#1890ff',
      },
      areaStyle: {
        color: '#1890ff',
        opacity: 0.2,
      },
      data: [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 86, 470],
      showSymbol: false,
      // itemStyle: {
      //   borderRadius: [2, 2, 0, 0],
      //   color: new graphic.LinearGradient(0, 0, 1, 0, [
      //     { offset: 0, color: lightenColor(theme.value.color, 50) },
      //     { offset: 1, color: theme.value.color },
      //   ]),
      // },
    },
    {
      name: '用户合成负荷',
      type: 'line',
      smooth: false,
      lineStyle: {
        color: '#36cbcb',
      },
      areaStyle: {
        color: '#36cbcb',
        opacity: 0.2,
      },
      showSymbol: false,
      data: [5, 150, 420, 56, 89, 263, 2, 52, 249, 115, 25, 485, 152, 39, 465, 184, 22],
      itemStyle: {
        borderRadius: [2, 2, 0, 0],
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: lightenColor(theme.value.color, 50) },
          { offset: 1, color: theme.value.color },
        ]),
      },
    },
  ],
})
// watch(
//   theme.value,
//   () => {
//     option.series.itemStyle.color = new graphic.LinearGradient(0, 0, 1, 0, [
//       { offset: 0, color: lightenColor(theme.value.color, 50) },
//       { offset: 1, color: theme.value.color },
//     ])
//   },
//   { immediate: true }
// )
</script>

<template>
  <div class="userRelations-container no-background-container">
    <!-- <div class="index-tittle">用户关系分析</div> -->

    <!-- Add the statistics card section based on image content -->
    <div class="page-top">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in cardInfo" :key="index" :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
          <el-card>
            <div class="card-top">
              <div class="title-with-icon">
                <vab-icon class="card-icon" :icon="item.icon" />
                <span>{{ item.title }}</span>
              </div>
              <div>{{ item.en }}</div>
            </div>
            <div class="card-middle">
              <div v-for="(data, dataIndex) in item.data" :key="dataIndex" class="middle-row">
                <div class="middle-left">
                  <div>{{ data.name }}</div>
                  <div>{{ data.en }}</div>
                </div>
                <div class="middle-right">
                  <span>{{ data.value }}</span>
                  <span>{{ data.unit }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card>
          <!-- <div class="index-top">
            <el-row :gutter="20">
              <el-col :lg="6" :md="12" :sm="24" :xl="4" :xs="24" v-for="(item, index) in topList" :key="index">
                <div
                  class="card-content"
                  :class="chooseIndex == index ? 'card-choose' : 'card-nochoose'"
                  @click="handleStyleFun($event, index)"
                >
                  <div class="card-icon">
                    <vab-icon :icon="item.icon" />
                  </div>
                  <span style="margin: 0 20px">{{ item.content }}</span>
                  <div>
                    <span class="card-blod">{{ item.number }}</span>
                    <span>{{ item.unit }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div> -->
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>用户—变压器映射关系图</span>
            </div>
            <div class="middle-right">
              <div style="margin-left: 20px">
                <el-select v-model="currentStatus.user" placeholder="请选择">
                  <el-option label="所有用户" value="0" />
                </el-select>
              </div>
            </div>
          </div>
          <div class="sankey-style">
            <vab-chart :option="option" @click="handleNodeClick" />
          </div>

          <!-- 报告候选对话框 -->
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>户变关系变更记录表</span>
            </div>
            <!-- <div class="middle-right">
              <el-button type="primary" size="small" icon="search-2-line" class="search-button">查询编辑器</el-button>
            </div> -->
          </div>
          <div class="search-style transformer-record-container">
            <!-- Search Box -->
            <div class="search-box">
              <el-input v-model="searchQuery" clearable placeholder="请输入用户及变压器编号搜索" @keyup.enter="searchTransformer">
                <template #prefix>
                  <el-icon class="search-icon">
                    <vab-icon icon="search-2-line" />
                  </el-icon>
                </template>
              </el-input>
              <el-button size="large" type="primary" @click="searchTransformer">查询</el-button>
            </div>

            <!-- Transformer List -->
            <div class="transformer-list">
              <!-- Show search results when available -->
              <template v-if="filteredTransformerList.length > 0">
                <div v-for="transformer in filteredTransformerList" :key="transformer.id" class="transformer-item">
                  <div class="transformer-header" @click="toggleTransformer(transformer)">
                    <div class="transformer-info">
                      <span>变压器{{ transformer.id }}</span>
                      <span class="households-count">{{ transformer.households }}户</span>
                    </div>
                    <div class="transformer-toggle">
                      <vab-icon :icon="activeTransformer === transformer.id ? 'arrow-up-s-line' : 'arrow-down-s-line'" />
                    </div>
                  </div>

                  <!-- User Table - Appears when transformer is clicked -->
                  <div v-if="activeTransformer === transformer.id" class="transformer-user-table">
                    <el-table
                      border
                      :cell-style="{ padding: '3px 0' }"
                      :data="transformerUsers[transformer.id]"
                      :header-cell-style="{ backgroundColor: '#f2f5fa', padding: '5px 0' }"
                      size="small"
                      style="width: 100%"
                    >
                      <el-table-column align="center" type="selection" width="40" />
                      <el-table-column align="center" label="用户名称" min-width="80" prop="id" />
                      <el-table-column align="center" label="更新时间" min-width="80" prop="updateTime" />
                      <el-table-column align="center" label="变更记录" min-width="120" prop="changeRecord">
                        <template #default="scope">
                          <!-- <span class="change-record">{{ scope.row.changeRecord }}</span>   -->
                          <el-button class="view-btn compact-btn" size="small" type="primary" @click="openViewDialog(scope.row)">
                            查看
                          </el-button>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="操作" min-width="120">
                        <template #default="scope">
                          <div class="operation-buttons">
                            <el-button class="view-btn compact-btn" size="small" type="primary" @click="openChangeDialog(scope.row)">
                              变更
                            </el-button>
                            <el-button class="detect-btn compact-btn" size="small" type="warning" @click="openDetectionDialog(scope.row)">
                              检测
                            </el-button>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </template>

              <!-- No search results message -->
              <div v-else-if="hasSearched && searchQuery.trim() && filteredTransformerList.length === 0" class="no-results">
                <el-empty description="未找到匹配的变压器信息" />
              </div>

              <!-- Initial placeholder state -->
              <div v-else-if="!hasSearched" class="initial-state">
                <el-empty description="请在搜索框中输入用户及变压器编号进行查询" :image-size="120">
                  <div class="search-hint">
                    <vab-icon icon="search-2-line" style="margin-right: 8px; font-size: 20px" />
                    <span>如：T1、T2、T3</span>
                  </div>
                </el-empty>
              </div>
            </div>
          </div>

          <!-- View Details Dialog -->
        </el-card>
        <el-dialog v-model="viewDialogVisible" center custom-class="detail-dialog" title="变更详情" width="400px">
          <div v-if="currentDetailUser" class="change-detail">
            <div class="detail-header">
              <vab-icon class="header-icon" icon="user-3-line" />
              <span>用户变更信息</span>
            </div>

            <div class="detail-content">
              <div class="detail-item">
                <div class="detail-label">
                  <vab-icon icon="user-fill" />
                  <span>用户编号:</span>
                </div>
                <div class="detail-value highlight-value">{{ currentDetailUser.id }}</div>
              </div>

              <div class="detail-item">
                <div class="detail-label">
                  <vab-icon icon="time-line" />
                  <span>变更时间:</span>
                </div>
                <div class="detail-value">{{ currentDetailUser.updateTime }}</div>
              </div>

              <div class="detail-item">
                <div class="detail-label">
                  <vab-icon icon="exchange-line" />
                  <span>变更内容:</span>
                </div>
                <div class="detail-value change-content">
                  <span class="change-from">{{ currentDetailUser.changeRecord.split('→')[0].trim() }}</span>
                  <vab-icon class="arrow-icon" icon="arrow-right-line" />
                  <span class="change-to">{{ currentDetailUser.changeRecord.split('→')[1].trim() }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>

        <!-- Detection Dialog -->
        <el-dialog v-model="detectionDialogVisible" center custom-class="detection-dialog" title="检测结果" width="400px">
          <div class="detection-result">
            <div class="detection-header">
              <vab-icon class="warning-icon" icon="error-warning-line" />
              <span>变压器连接异常</span>
            </div>

            <div class="detection-content">
              <div class="detection-box">
                <div class="detection-message">
                  原接入
                  <span class="transformer-name">T3</span>
                  , 识别为
                  <span class="transformer-name">T5</span>
                </div>
              </div>

              <div class="detection-info">
                <vab-icon class="info-icon" icon="information-line" />
                <div class="info-text">
                  <p>系统检测到该用户当前连接与系统识别结果不一致，建议检查连接关系</p>
                </div>
              </div>

              <div class="detection-actions">
                <el-button size="small" @click="detectionDialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="detectionDialogVisible = false">确认调整</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>负荷合成对比分析图</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.hours" placeholder="请选择" style="width: 300px">
                  <el-option label="T1实测用户+T1用户合成符合曲线" value="0" />
                </el-select>
              </div>
            </div>
          </div>
          <div style="height: 480px">
            <vab-chart :option="optionThree" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>识别异常用户列表</span>
            </div>
            <!-- <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.currentDay" placeholder="请选择">
                  <el-option label="近一小时" value="0" />
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-button>查看全部</el-button>
              </div>
            </div> -->
          </div>
          <div class="exception-table">
            <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#dbf4ee' }" :height="500">
              <el-table-column fixed label="用户编号" prop="date" width="150" />
              <el-table-column label="原变压器" prop="name" width="120" />
              <el-table-column label="当前识别结果" prop="state" width="120" />
              <el-table-column label="识别时间" prop="city" width="120" />
              <el-table-column label="偏差类型" prop="address" width="120" />
              <el-table-column label="状态" prop="tag" width="120" />
              <!-- <el-table-column fixed="right" label="操作" min-width="120">
                <template #default>
                  <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
                  <el-button link type="primary" size="small">Edit</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      v-model="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      center
      class="transformer-dialog"
      title="用户-变压器关系优化"
      width="450px"
    >
      <div class="dialog-content">
        <div v-if="currentNode" class="node-info">
          <p>
            <vab-icon class="warning-icon" icon="error-warning-line" />
            当前用户
            <span class="highlight">{{ currentNode.name }}</span>
            接入变压器不合理
          </p>
        </div>
        <div class="transformer-selector-box">
          <div class="selector-title">
            <span class="title-icon"></span>
            报告候选: T₂, T₃
          </div>
          <div class="selector-content">
            <div class="priority-label">优先对</div>
            <div class="priority-select">
              <el-select v-model="priorityTransformer" size="small">
                <el-option label="T₂" value="T2"/>
                <el-option label="T₃" value="T3"/>
              </el-select>
            </div>
          </div>
        </div>

        <div class="connection-info">
          <div class="connection-title">连接偏差说明:</div>
          <div class="connection-details">
            <p>检测到当前用户负荷特性与所连接变压器用户群体存在明显偏差，建议调整连接关系。</p>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer-main">
          <el-button @click="dialogVisible = false">保持现状</el-button>
          <el-button class="accept-btn" type="primary" @click="dialogVisible = false">接受推荐</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- Change Transformer Dialog -->
    <el-dialog v-model="changeDialogVisible" center custom-class="change-dialog" title="变更户变关系信息" width="450px">
      <div v-if="currentDetailUser" class="change-form">
        <div class="form-header">
          <vab-icon class="header-icon" icon="exchange-line" />
          <span>变更户变关系信息</span>
        </div>

        <div class="form-content">
          <div class="form-item">
            <div class="form-label">
              <vab-icon icon="user-fill" />
              <span>用户名称:</span>
            </div>
            <div class="form-value highlight-value">张三</div>
          </div>

          <div class="form-item">
            <div class="form-label">
              <vab-icon icon="settings-3-line" />
              <span>当前所属变压器:</span>
            </div>
            <div class="form-value current-transformer">T2</div>
          </div>

          <div class="form-item">
            <div class="form-label">
              <vab-icon icon="lightbulb-flash-line" />
              <span>建议变压器:</span>
            </div>
            <div class="form-value suggested-transformer">T3</div>
          </div>

          <div class="transformer-select-box">
            <div class="select-header">
              <span class="title-icon"></span>
              <span>目标变压器</span>
            </div>
            <div class="select-content">
              <el-select v-model="targetTransformer" class="transformer-dropdown" placeholder="选择目标变压器">
                <el-option label="T3 (推荐)" value="T3">
                  <div class="transformer-option">
                    <vab-icon class="option-icon" icon="check-double-line" />
                    T3
                    <span class="recommended-badge">(推荐)</span>
                  </div>
                </el-option>
                <el-option label="T1" value="T1">
                  <div class="transformer-option">
                    <vab-icon class="option-icon" icon="settings-3-line" />
                    T1
                  </div>
                </el-option>
                <el-option label="T2" value="T2">
                  <div class="transformer-option">
                    <vab-icon class="option-icon" icon="settings-3-line" />
                    T2
                  </div>
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="reason-box">
            <div class="reason-header">
              <vab-icon icon="chat-4-line" />
              <span>变更原因</span>
            </div>
            <div class="reason-input">
              <el-input v-model="changeReason" placeholder="(请输入变更原因...)" :rows="3" type="textarea" />
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer-change">
          <el-button @click="changeDialogVisible = false">取消</el-button>
          <el-button class="confirm-btn" type="primary" @click="changeDialogVisible = false">确认变更</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.userRelations-container {
  :deep() {
    .el-card {
      background-color: #fff;
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.5));
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(10, 179, 137, 0.15);
        transform: translateY(-5px);
      }

      .el-card__header {
        position: relative;

        > div > span {
          display: flex;
          align-items: center;

          i {
            margin-right: 3px;
          }
        }
      }

      .el-card__body {
        position: relative;

        .card-footer-tag {
          position: absolute;
          right: var(--el-margin);
          bottom: 15px;
        }
      }
    }

    .page-top {
      min-height: 200px;

      .card-top {
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px dashed #ebeef5;

        .title-with-icon {
          display: flex;
          gap: 8px;
          align-items: center;

          .card-icon {
            width: 40px;
            height: 40px;
            padding: 8px;
            font-size: 24px;
            color: #0ab389;
            background-color: rgba(10, 179, 137, 0.1);
            border-radius: 8px;
          }
        }

        div:first-child {
          color: #303133;
        }

        div:last-child {
          margin-top: 4px;
          font-size: 14px;
          font-weight: normal;
          color: #909399;
        }
      }

      .middle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding-bottom: 10px;
        margin-top: 16px;
        border-bottom: 1px solid #f2f5fa;
        transition: all 0.3s ease;

        &:hover {
          border-bottom-color: #d4e6e0;
          transform: translateX(5px);
        }

        .middle-left {
          font-size: 16px;

          div:first-child {
            font-weight: 500;
            color: #303133;
          }

          div:last-child {
            margin-top: 4px;
            font-size: 12px;
            color: #909399;
          }
        }

        .middle-right {
          position: relative;
          display: flex;
          align-items: baseline;

          &::before {
            position: absolute;
            top: 50%;
            left: -15px;
            width: 3px;
            height: 70%;
            content: '';
            background-color: #0ab389;
            border-radius: 3px;
            opacity: 0;
            transform: translateY(-50%);
            transition: all 0.3s ease;
          }

          span:nth-child(1) {
            font-size: 26px;
            font-weight: bold;
            color: #0ab389;
            transition: all 0.3s ease;
          }

          span:nth-child(2) {
            margin-left: 6px;
            font-size: 14px;
            color: #909399;
          }
        }

        &:hover .middle-right::before {
          left: -10px;
          opacity: 1;
        }
      }
    }
  }

  .index-tittle {
    width: 100%;
    height: 60px;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: #000;
    background-color: #fff;
  }
  .card-style {
    :deep() {
      .el-card__body {
        height: 550px;
      }
    }
  }
  .index-top {
    width: 100%;
    margin-top: 20px;

    .card-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 60px;
      margin-bottom: 20px;
      line-height: 60px;
      text-align: center;
      background-color: #f2f5fa;
      border-radius: 10px;
      > span {
        margin: 0 20px;
      }
      .card-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 20px;
      }
      .card-blod {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .card-choose {
      position: relative;
      background-color: #cef0e7;
      border: 1px solid #09b388;
      &::before {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 0;
        height: 0;
        content: '';
        border: 6px solid #09b388;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 6px;
      }
    }

    .card-nochoose {
      background-color: #f2f5fa;
      border: none;
    }
  }
  .index-middle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
    .middle-left {
      display: flex;
      margin: 0;
      vertical-align: middle;
      .title-style {
        display: inline-block;
        width: 5px;
        height: 20px;
        margin-right: 10px;
        background-color: #0ab389;
        border-radius: 0 5px 5px 0;
      }
    }
    .middle-right {
      display: flex;
    }
  }
  .sankey-style {
    height: 260px;
    overflow: auto;
    :deep() {
      .echarts {
        // height: 800px !important;
      }
    }
  }
  .search-style {
    height: 480px;
    margin-top: 20px;
    > div {
      margin-right: 20px;
    }
    .search-button {
      // 绿色背景色---基础按钮
      // 绿色背景色---基础按钮
      :deep() {
        .el-button--primary {
          color: #ffffff;
          background-color: #0ab389;
          border-color: #0ab389;
        }
        .el-button--primary.el-button--large.is-active,
        .el-button--primary.el-button--large:active {
          color: #ffffff;
          background-color: #afe4d7;
          border-color: #afe4d7;
        }
      }
    }
    .list-content {
      position: relative;
      width: 100%;
      height: 60px;
      margin-top: 30px;
      font-size: 16px;
      font-weight: bold;
      line-height: 60px;
      border: 1px solid #f2f5fa;
      border-radius: 10px;
      .left-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 60px;
        background: linear-gradient(135deg, #09b388, hsl(166, 44%, 83%));
        border-radius: 10px 0 0 10px;
      }
      .right-content {
        margin-left: 30px;
      }
    }
    .search-bottom {
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
    }
  }
}

// 变压器选择器样式
.transformer-selector-box {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #f8fffc;
  border: 2px solid #0ab389;
  border-radius: 5px;

  .selector-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #0ab389;

    .title-icon {
      display: inline-block;
      width: 4px;
      height: 16px;
      margin-right: 8px;
      background-color: #0ab389;
      border-radius: 2px;
    }
  }

  .selector-content {
    display: flex;
    align-items: center;

    .priority-label {
      margin-right: 15px;
      font-size: 14px;
      color: #333;
    }

    .priority-select {
      width: 100px;
    }
  }
}

.dialog-content {
  padding: 20px;

  .node-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;

    .warning-icon {
      margin-right: 8px;
      font-size: 18px;
      color: #f56c6c;
    }

    .highlight {
      padding: 0 5px;
      font-weight: bold;
      color: #0ab389;
    }
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
.dialog-footer-main {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Add button styling */
.accept-btn {
  background-color: #0ab389;
  border-color: #0ab389;

  &:hover {
    background-color: #09a278;
    border-color: #09a278;
  }
}

.transformer-dialog {
  :deep(.el-dialog__header) {
    padding: 15px 20px;
    margin: 0;
    background-color: #f8fffc;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #0ab389;
    }
  }

  :deep(.el-dialog__headerbtn) {
    top: 15px;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
  }

  .connection-info {
    padding: 15px;
    margin-top: 20px;
    background-color: #f2f5fa;
    border-left: 4px solid #0ab389;
    border-radius: 5px;

    .connection-title {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    .connection-details {
      font-size: 14px;
      line-height: 1.5;
      color: #666;
    }
  }
}

.transformer-record-container {
  display: flex;
  flex-direction: column;
  height: 480px;
  padding: 10px;
  overflow-y: auto;
}

.search-box {
  display: flex;
  margin-bottom: 10px;

  .el-input {
    flex: 1;
    margin-right: 5px;

    ::v-deep .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .search-icon {
      display: flex;
      align-items: center;
      margin-left: 5px;
      font-size: 18px;
      color: #909399;
    }
  }

  .el-button {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    background-color: #0ab389;
    border-color: #0ab389;

    &:hover,
    &:focus {
      background-color: #09a278;
      border-color: #09a278;
    }

    &:active {
      background-color: #afe4d7;
      border-color: #afe4d7;
    }
  }
}

.transformer-list {
  .transformer-item {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #f2f5fa;
    border-radius: 5px;
  }

  .transformer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    padding: 8px 10px;
    cursor: pointer;
    background-color: #f8fffc;
    border-left: 4px solid #0ab389;

    &:hover {
      background-color: #eefbf7;
    }

    .transformer-info {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      color: #333;

      .households-count {
        margin-left: 8px;
        font-size: 13px;
        color: #0ab389;
      }
    }

    .transformer-toggle {
      font-size: 16px;
      color: #0ab389;
    }
  }

  .transformer-user-table {
    padding: 5px;
    background-color: #fff;

    .el-table {
      border: 1px solid #ebeef5;

      ::v-deep .el-table__header th {
        height: 35px;
        padding: 5px 0;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        background-color: #f2f5fa !important;
      }

      ::v-deep .el-table__row td {
        height: 40px;
        padding: 0;
        font-size: 12px;
      }
    }

    .change-record {
      margin-right: 5px;
      font-size: 12px;
    }

    .operation-buttons {
      display: flex;
      gap: 3px;
      justify-content: center;
    }

    .compact-btn {
      height: 24px;
      padding: 3px 5px;
      font-size: 12px;
      line-height: 1;

      &.view-btn {
        background-color: #409eff;
        border-color: #409eff;
      }

      &.detect-btn {
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
    }
  }
}

.change-detail {
  background-color: #fff;

  .detail-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8fffc;
    border-bottom: 1px solid #f2f2f2;

    .header-icon {
      margin-right: 10px;
      font-size: 20px;
      color: #0ab389;
    }

    span {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .detail-content {
    padding: 15px 20px;

    .detail-item {
      display: flex;
      padding-bottom: 12px;
      margin-bottom: 15px;
      border-bottom: 1px dashed #f2f2f2;

      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }

      .detail-label {
        display: flex;
        align-items: center;
        width: 90px;
        font-size: 14px;
        color: #666;

        i {
          margin-right: 5px;
          font-size: 16px;
          color: #0ab389;
        }
      }

      .detail-value {
        flex: 1;
        font-size: 14px;
        color: #333;

        &.highlight-value {
          font-weight: bold;
          color: #0ab389;
        }
      }

      .change-content {
        display: flex;
        align-items: center;

        .change-from {
          padding: 2px 8px;
          color: #f56c6c;
          background-color: #fef0f0;
          border-radius: 3px;
        }

        .arrow-icon {
          margin: 0 10px;
          color: #909399;
        }

        .change-to {
          padding: 2px 8px;
          color: #0ab389;
          background-color: #f0f9eb;
          border-radius: 3px;
        }
      }
    }
  }
}

.detection-result {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 5px;

  .detection-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #f2f2f2;

    .warning-icon {
      margin-right: 10px;
      font-size: 22px;
      color: #f56c6c;
    }

    span {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .detection-content {
    padding: 20px;

    .detection-box {
      padding: 15px;
      margin-bottom: 15px;
      background-color: #fff8f8;
      border: 1px solid #fde2e2;
      border-radius: 4px;

      .detection-message {
        font-size: 16px;
        color: #333;
        text-align: center;

        .transformer-name {
          display: inline-block;
          padding: 2px 10px;
          margin: 0 5px;
          font-weight: bold;
          color: #409eff;
          background-color: #f5f7fa;
          border-radius: 4px;
        }
      }
    }

    .detection-info {
      display: flex;
      padding: 10px 15px;
      margin-bottom: 20px;
      background-color: #f0f9eb;
      border-left: 4px solid #67c23a;
      border-radius: 4px;

      .info-icon {
        margin-top: 2px;
        margin-right: 10px;
        font-size: 18px;
        color: #67c23a;
      }

      .info-text {
        flex: 1;

        p {
          margin: 0;
          font-size: 14px;
          line-height: 1.5;
          color: #666;
        }
      }
    }

    .detection-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;

      .el-button--primary {
        background-color: #0ab389;
        border-color: #0ab389;
      }
    }
  }
}

.detail-dialog {
  ::v-deep .el-dialog__header {
    padding: 15px 20px;
    background-color: #f8fffc;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 16px;
      font-weight: bold;
      color: #0ab389;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0;
  }
}

.detection-dialog {
  ::v-deep .el-dialog__header {
    padding: 15px 20px;
    background-color: #f8fffc;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 16px;
      font-weight: bold;
      color: #0ab389;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0;
  }
}

.change-dialog {
  ::v-deep .el-dialog__header {
    padding: 15px 20px;
    margin: 0;
    background-color: #f8fffc;
    border-bottom: 1px solid #ebeef5;

    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #0ab389;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0;
  }

  ::v-deep .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
  }

  .dialog-footer-change {
    display: flex;
    gap: 10px;
    justify-content: flex-end;

    .confirm-btn {
      background-color: #0ab389;
      border-color: #0ab389;

      &:hover {
        background-color: #09a278;
        border-color: #09a278;
      }
    }
  }
}

.change-form {
  background-color: #fff;

  .form-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8fffc;
    border-bottom: 1px solid #f2f2f2;

    .header-icon {
      margin-right: 10px;
      font-size: 20px;
      color: #0ab389;
    }

    span {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .form-content {
    padding: 20px;

    .form-item {
      display: flex;
      align-items: center;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px dashed #f2f2f2;

      &:last-of-type {
        border-bottom: none;
      }

      .form-label {
        display: flex;
        align-items: center;
        width: 140px;
        font-size: 14px;
        color: #606266;

        i {
          margin-right: 8px;
          font-size: 16px;
          color: #0ab389;
        }
      }

      .form-value {
        flex: 1;
        font-size: 15px;
        font-weight: 500;
        color: #303133;

        &.highlight-value {
          font-weight: bold;
          color: #0ab389;
        }

        &.current-transformer {
          font-weight: bold;
          color: #409eff;
        }

        &.suggested-transformer {
          font-weight: bold;
          color: #67c23a;
        }
      }
    }
  }
}

.transformer-select-box {
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f8fffc;
  border: 1px solid #e8f6f1;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(10, 179, 137, 0.08);

  .select-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #f0fbf6;
    border-bottom: 1px solid #e8f6f1;

    .title-icon {
      display: inline-block;
      width: 4px;
      height: 16px;
      margin-right: 8px;
      background-color: #0ab389;
      border-radius: 2px;
    }

    span {
      font-size: 15px;
      font-weight: bold;
      color: #0ab389;
    }
  }

  .select-content {
    padding: 15px;

    .transformer-dropdown {
      width: 100%;

      ::v-deep .el-input__inner {
        border-color: #c2e7dd;
      }
    }
  }
}

.reason-box {
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 5px;

  .reason-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;

    i {
      margin-right: 8px;
      font-size: 16px;
      color: #909399;
    }

    span {
      font-size: 15px;
      font-weight: 500;
      color: #606266;
    }
  }

  .reason-input {
    padding: 15px;

    ::v-deep .el-textarea__inner {
      border-color: #dcdfe6;
      transition: all 0.3s;

      &:focus {
        border-color: #0ab389;
        box-shadow: 0 0 0 2px rgba(10, 179, 137, 0.2);
      }
    }
  }
}

.transformer-option {
  display: flex;
  align-items: center;

  .option-icon {
    margin-right: 8px;
    font-size: 16px;
    color: #409eff;
  }

  .recommended-badge {
    padding: 2px 5px;
    margin-left: 5px;
    font-size: 12px;
    color: white;
    background-color: #0ab389;
    border-radius: 3px;
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
.dialog-footer-main {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Add styles for the search containers */
.initial-state {
  margin-top: 80px;
  text-align: center;

  .search-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    font-size: 14px;
    color: #909399;

    i {
      margin-right: 8px;
      color: #0ab389;
    }
  }

  :deep() {
    .el-empty__description {
      margin-top: 15px;
      font-size: 16px;
      color: #606266;
    }

    .el-empty__image {
      opacity: 0.8;
    }
  }
}
</style>
